<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="pinpin社保" />
	<meta name="description" content="pinpin社保" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>社保运营后台-社保号/公积金号导入管理</title>
	<link rel="stylesheet" href="/as/css/bootstrap.css" />
	<link rel="stylesheet" href="/as/css/layout.css" />
    <link rel="stylesheet" href="/as/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="/as/js/artDialog/ui-dialog.custom.css">
    <link rel="stylesheet" href="/as/css/smoke.min.css">
</head>
<body>
	<div id="wrapper">
        <%@ include file="/WEB-INF/jsp/common/menu.jsp" %>
        <div id="page-wrapper">
        	<div class="row">
                <div class="col-lg-12">
                    <!-- 路径导航 -->
                    <ol class="breadcrumb">
				      <li>社保后台</li>
				      <li class="active">卡号导入管理</li>
				    </ol>
                </div>
            </div>
            <div class="row">
            	<div class="col-lg-12">
            		<div class="panel panel-default">
            			<div class="panel-body">
        			    	<div class="form-inline dt-bootstrap no-footer">
        			    		<!-- 表单查询 -->
        			    		<form action="${list_uri }" method="post" id="tmpcardForm" class="form-check">
        			    		<div class="row">
        			    			<div class="col-lg-12">
        			    			    <input type="text" name="batch_no" placeholder="请输入导入数据批次号" value="${cardParam.batch_no}" class="form-control" />
        			    				<input type="text" name="id_card" placeholder="请输入参保人身份证" value="${cardParam.id_card}" class="form-control" />
        			    				<select class="form-control" id="status" name="status">
                                        	<option value="-1">--请选择处理状态--</option>
                                        	<c:forEach var="status" items="${enumStatus }">
    			    							<option value="${status.num }" <c:if test="${cardParam.status eq status.num }">selected</c:if>>${status.name }</option>
    			    						</c:forEach>
                                        </select>
                                        <input type="text" class="form-control" name="begin_create_time" value="${cardParam.begin_create_time }" placeholder="记录导入开始时间" onClick="WdatePicker()">
        			    				<input type="text" class="form-control" name="end_create_time" value="${cardParam.end_create_time }" placeholder="记录导入结束时间" onClick="WdatePicker()">
        			    			    <button type="button" onclick="queryCardList();" class="btn btn-primary">查 询</button>
        			    			    <button type="button" onclick="resetCond();" class="btn btn-primary">重置</button>
        			    			</div>
        			    		</div>
        			    		</form>
        			    		<!-- 分页 -->
        			    		<jsp:include page="/WEB-INF/jsp/common/page.jsp">
        			    			<jsp:param name="formId" value="tmpcardForm"/>
        			    		</jsp:include>
        			    		<hr/>
        			    		<div class="row">
                                    <div class="col-lg-11  toggle_vis">
                                    	<button type="button" onclick="showImportExcel();" class="btn btn-primary btn-sm showcol">导入记录</button>
                                    	<button type="button" onclick="showUpdateSbUser();" class="btn btn-primary btn-sm showcol">批量更新参保人社保号公积金号</button>
                                    	<button type="button" onclick="showConfirmDel();" class="btn btn-primary btn-sm showcol">批量删除记录</button>
                                    </div>
        			    	    </div>
        			    		<!-- 表格列表 -->
        			    		<div class="row">
        			    			<div class="col-lg-12 width-auto">
        			    				<table id="dataContent" class="table table-striped table-hover no-footer table-title" role="grid">
        			    					<thead>
        			    						<tr><th width="2%"><label><input type="checkbox" name="selectAll" id="selectAll" onclick="javascript:selectAllCheckbox(this,'pids');"></label></th>
                                                    <th width="8%">批次号</th>
                                                    <th width="8%">身份证号</th>
                                                    <th width="8%">社保号</th>
                                                    <th width="8%">公积金号</th>
                                                    <th width="4%">处理状态</th>
                                                    <th width="12%">备注</th>
                                                    <th width="8%">产生日期</th>
                                                    <th width="4%">操作</th>
                                                </tr>
        			    					</thead>
        			    					<tbody>
        			    					<c:forEach items="${pageModel.recordList }" var="card">
        			    						<tr role="row">
        			    							<td><input type="checkbox" name="pids" value="${card.id }"></td>
        			    							<td>
	        			    							${card.batch_no }
        			    							</td>
        			    							<td>
        			    								${card.id_card }
        			    							</td>
        			    							<td>
        			    								${card.shebao_card }
        			    							</td>
        			    							<td>
        			    								${card.fund_card }
        			    							</td>
        			    							<td>
        			    								<c:forEach var="status" items="${enumStatus }">
        			    									<c:set var="statusColor" value="blue" />
        			    									<c:if test="${card.status eq 2 }">
        			    										<c:set var="statusColor" value="green" />
        			    									</c:if>
        			    									<c:if test="${card.status eq 3 }">
        			    										<c:set var="statusColor" value="red" />
        			    									</c:if>
        			    									<font color="${statusColor }">
	        			    								<c:if test="${card.status eq status.num }">${status.name }</c:if>
	        			    								</font>
	        			    							</c:forEach>
        			    							</td>
        			    							<td>
        			    								${card.memo }
        			    							</td>
        			    							<td>
        			    								<fmt:formatDate value="${card.create_time }" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
        			    							</td>
                                                    <td>
                                                    	<a href="javascript:showConfirmDel('${card.id}');"><font color="red">删除</font></a>
                                                    </td>
        			    						</tr>
        			    					</c:forEach>
        			    					</tbody>
        			    				</table>
        			    			</div>
        			    		</div>
        			    		<!-- 分页 -->
                                <hr/>
        			    		<jsp:include page="/WEB-INF/jsp/common/page.jsp">
        			    			<jsp:param name="formId" value="tmpcardForm"/>
        			    		</jsp:include>
        			    	</div>
            			</div>
            		</div>
            	</div>
            </div>
        </div>
	</div>
	<div id="importExcelBox" style="display:none;width:420px">
	    <div>
	    	<div>可以<a href="javascript:downloadExcel();">点击此处</a>下载模板，导入的excel请严格遵照模板格式填写。</div><br/>
	    	<form id="downloadForm" action="${download_uri }" method="post" enctype ="multipart/form-data"></form>
	    	<form id="importForm" action="${import_uri }" method="post" enctype ="multipart/form-data">
	    		<input type="file" style="display:inline-block;" id="uploadFile" name="uploadFile"/>
	    		<button type="button" class="btn btn-primary btn-sm" onclick="importExcel();">确定</button>
	    	</form>
    	</div>
	</div>
	<script src="/as/js/jquery-1.11.1.min.js"></script>
	<script src="/as/js/artDialog/dialog-min.custom.js"></script>
	<script src="/as/js/artDialog/dialog-min.js"></script>
    <script src="/as/js/jquery.dataTables.min.js"></script>
    <script src="/as/js/bootstrap.min.js"></script>
    <script src="/as/js/metisMenu.min.js"></script>
    <script src="/as/js/ss_common.js"></script>
    <script src="/as/js/smoke.min.js"></script>
    <script src="/as/js/My97DatePicker/WdatePicker.js"></script>
    <script language="javascript">
    	$(function(){
    		var result = "${cardResult.result}";
    		if(result == "success") {
    			var batchNo = "${cardResult.batch_no}";
    			var total = "${cardResult.total}";
    			var success = "${cardResult.success}";
    			showInfo("数据导入成功, 共计:"+total+"条记录 ,成功:"+success+"条记录");
    		} else if(result == "fail") {
    			var msg = "${cardResult.msg}";
    			showInfo("数据导入失败,错误信息:"+msg);
    		}
    	});
    	
    	function selectAllCheckbox(btn,items){
    	  	var selectAll=btn;
    	  	var nid_var=document.getElementsByName(items);
    	  	for(var i = 0; i<nid_var.length; i++ ) {
    			nid_var[i].checked = selectAll.checked;
    		}
    	}
    	
    	function queryCardList() {
    		var $form = $("#tmpcardForm");
    		$form.find("input[name='pageNo']").val("1");
    		$form.submit();
    	}
    	
    	function resetCond() {
    		var $form = $("#tmpcardForm");
    		$form.find("div:first input[type='text']").val("");
    		$("#status").val(-1);
    	}
    	
    	function showImportExcel() {
    		var content=$("#importExcelBox")[0];
    		var d=dialog({id:"IMPORT_EXCEL_DIALOG", title:'批量导入社保号公积金号', content:content,quickClose:true}).show();
    	}
    	
		function downloadExcel() {
    		var $form = $("#downloadForm");
    		$form.submit();
    	}
		
		function importExcel() {
			var uploadFile = $("#uploadFile").val();
			if(uploadFile == null || uploadFile == "") {
				showInfo("请选择上传excel");
				return false;
			}
			var $form = $("#importForm");
			$form.submit();
		}
		
		function showUpdateSbUser() {
			var ids = "";
			$("#dataContent input[type='checkbox'][name='pids']").filter(":checked").each(function(){
				ids += $(this).val()+",";
			});
			if(ids != "") {
				ids = ids.substring(0, ids.length-1);
			}
			if(ids == "") {
    			showInfo("更新参保人社保号公积金号失败，请选择处理的记录");
    			return false;
    		}
			showConfirm("确定更新参保人社保号公积金号？", function() {
    			var data = {
    					"ids" : ids
    			};
    			jQuery.ajax({
    				url: "${modify_uri}",
    				data: data,
    				type:'post', 
    				async : true, //默认为true 异步   
    				error: function(jqXHR, textStatus, errorThrown) {
    					showInfo("请求出错，状态码："+textStatus+", 错误信息："+errorThrown);
    				},
    				success:function(result){
    					if(result && result.code == 200) {
    						showInfo("更新参保人社保号公积金号成功!", function(){
        						queryCardList();
        					});
    					} else {
    						showInfo(result.msg);	
    					}
    				}
    			});
    		}, null);
		}
		
    	function showConfirmDel(id) {
    		var ids = "";
    		if(id != null && id != "") {
    			ids = id;
    		} else {
    			$("#dataContent input[type='checkbox'][name='pids']").filter(":checked").each(function(){
    				ids += $(this).val()+",";
    			});
    			if(ids != "") {
    				ids = ids.substring(0, ids.length-1);
    			}
    		}
    		if(ids == "") {
    			showInfo("删除临时卡号失败，请选择删除的记录");
    			return false;
    		}
    		showConfirm("确定删除选中的记录？", function() {
    			var data = {
    					"ids" : ids
    			};
    			jQuery.ajax({
    				url: "${delete_uri}",
    				data: data,
    				type:'post', 
    				async : true, //默认为true 异步   
    				error: function(jqXHR, textStatus, errorThrown) {
    					showInfo("请求出错，状态码："+textStatus+", 错误信息："+errorThrown);
    				},
    				success:function(result){
    					if(result && result.code == 200) {
    						showInfo("删除临时卡号成功!", function(){
        						queryCardList();
        					});
    					} else {
    						showInfo(result.msg);	
    					}
    				}
    			});
    		}, null);
    	}
    </script>
</body>
</html>